<!-- 设备动态记录 -->
<template>
  <div class="dynamic-record">
    <div class="dynamic-record-content">
      <a-collapse expand-icon-position="right">
        <a-collapse-item header="Beijing Toutiao Technology Co., Ltd." key="1">
          <template #expand-icon="{ active }">
            <icon-double-down v-if="active" />
            <icon-double-right v-else />
          </template>
          <div>
            <a-timeline mode="left" labelPosition="relative">
              <a-timeline-item dot-type="hollow">
                The first milestone
                <br />
                <a-typography-text
                  type="secondary"
                  :style="{ fontSize: '12px', marginTop: '4px' }"
                >
                  This is a descriptive message
                </a-typography-text>
              </a-timeline-item>
              <a-timeline-item dot-type="hollow">
                The first milestone
                <br />
                <a-typography-text
                  type="secondary"
                  :style="{ fontSize: '12px', marginTop: '4px' }"
                >
                  This is a descriptive message
                </a-typography-text>
              </a-timeline-item>
            </a-timeline>
          </div>
        </a-collapse-item>
      </a-collapse>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, computed } from 'vue';
</script>

<style scoped lang="less">
  .dynamic-record {
    :deep(.arco-timeline-item-dot) {
      position: relative;
      top: 6px;
      width: 15px;
      height: 15px;
    }
    :deep(.arco-timeline-item-dot-hollow) {
      left: -7px;
      border-width: 3px;
    }

    :deep(.arco-timeline-item-dot-line) {
      top: 10px;
      border-left-width: 3px; 
      left: 10%;
    }
  }
</style>
